<template>
	<view class="detail">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text>客户详情</text>
			</view>
		</view>
		<view class="container" v-if="list.length">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="shang clearfix">
					<image :src="item.avatar" class="fl"></image>
					<view class="title fl">{{item.name}}</view>
					<view class="open fr" v-if="item.uid != ''" @click="openDouyin(item.uid)">打开抖音</view>
				</view>
				<view class="center">{{item.commentContent}}</view>
				<view class="time">{{item.commentTime}}</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image src="../../../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default {
		data() {
			return {
				businessId: '',
				userData: [],
				pageNo: 1,
				list: [],
			}
		},
		onLoad(options) {
			this.businessId = options.businessId;

			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;

				this.getList();
			}).catch((error) => {});
		},
		onReachBottom() {
			this.pageNo++;
			this.getList()
		},
		methods: {
			getList() {
				let that = this;
				
				request({
					url: '/api/usergroupbuy/auto_comment',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						businessId: that.businessId,
						pageNo: that.pageNo,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if (response.code == 1) {
						let list = response.data.list;
						
						for (let i = 0; i < list.length; i++) {
							list[i].commentTime = list[i].commentTime.substring(0, 10);
						}

						if (list) {
							that.list.push(...list)
						} else {
							uni.showToast({
								title: '到底啦',
								icon: 'none'
							})
						}
					}
				}).catch((error) => {});
			},
			openDouyin(uid) {
				const appurl = 'snssdk1128://user/profile/' + uid
				// #ifdef APP-PLUS
				plus.runtime.openURL(appurl, function(res) {
					console.log(res);
				});
				// #endif
			},
			fanhui() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 166rpx;
			z-index: 200;
		
			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 60rpx;
				left: 3%;
				height: 96rpx;
				line-height: 96rpx;
		
				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: 28rpx;
				}
		
				text {
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
					height: 96rpx;
					line-height: 96rpx;
				}
		
				view {
					font-size: 30rpx;
					color: #ECDEA4;
					float: right;
					height: 96rpx;
					line-height: 96rpx;
				}
			}
		}

		.container {
			width: 94%;
			margin: 0 auto 20rpx;
			position: relative;
			z-index: 220;

			.list {
				width: 100%;
				padding: 21rpx 29rpx 28rpx 21rpx;
				box-sizing: border-box;
				background: #242831;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.shang {
					width: 100%;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #E8BD70;
						margin-right: 21rpx;
					}

					.title {
						font-size: 30rpx;
						color: #FFFFFF;
						height: 80rpx;
						line-height: 80rpx;
					}

					.open {
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #ECDEA4;
						border: 1rpx solid #ECDEA4;
						font-size: 24rpx;
						border-radius: 25rpx;
						margin-top: 14rpx;
					}
				}

				.center {
					width: 100%;
					margin-top: 18rpx;
					font-size: 26rpx;
					color: #ABB0CC;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.time {
					width: 100%;
					margin-top: 20rpx;
					text-align: right;
					font-size: 24rpx;
					color: #787B8F;
				}
			}
		}

		.empty{
			width: 94%;
			margin: 300rpx auto;
			text-align: center;
			
			image{
				width: 300rpx;
			}
		}
	}
</style>